<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Expandable Fieldsets Example</title>
    <script src="prototype.js" type="text/javascript" charset="utf-8"></script>
    <script src="expandable_fieldsets.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css" media="screen">
      a { cursor: pointer; text-decoration: underline; color: #00F; }
      .serialized_data { width: 500px; height: 300px; }
    </style>
  </head>
  <body>
    <h1>Sample Form 1</h1>
    <form action="#" method="post" accept-charset="utf-8">
      <p><textarea id="serialized_data_1" class="serialized_data">[{"which": "steve"}, {"quantity": "test2", "color": "blue"}, {"quantity": "test3", "color": "red"}]</textarea></p>
      <fieldset id="fields-1"></fieldset>
      <p><input type="submit" value="Send &rarr;"></p>
    </form>
    <script type="text/javascript" charset="utf-8">
      new ExpandableFieldset(
        'fields-1',
        '<div class="product"><label><input type="text" name="quantity" value="default"></label><label><input type="radio" name="color#{index}" value="red">Red </label><label><input type="radio" name="color#{index}" value="blue" checked="checked">Blue </label><label><select name="which"><option value="bob">Bob</option><option value="joe">Joe</option><option value="steve">Steve</option></select></label><label><input type="radio" name="primary" value="yes">Primary?</label> #{remover}</div>',
        { dataField: 'serialized_data_1' }
      )
    </script>

    <h1>Sample Form 2</h1>
    <form action="#" method="post" accept-charset="utf-8">
      <p><textarea id="serialized_data_2" class="serialized_data">[{"which": "steve"}, {"quantity": "test2", "color": "blue", "primary": "yes"}, {"quantity": "test3", "color": "red"}]</textarea></p>
      <fieldset id="fields-2"></fieldset>
      <p><input type="submit" value="Send &rarr;"></p>
    </form>
    <script type="text/javascript" charset="utf-8">
      new ExpandableFieldset(
        'fields-2',
        '<div class="product"><label><input type="text" name="quantity" value="default"></label><label><input type="radio" name="color#{index}" value="red">Red </label><label><input type="radio" name="color#{index}" value="blue" checked="checked">Blue </label><label><select name="which"><option value="bob">Bob</option><option value="joe">Joe</option><option value="steve">Steve</option></select></label><label><input type="radio" name="primary" value="yes">Primary?</label> #{remover}</div>',
        { dataField: 'serialized_data_2' }
      )
    </script>
  </body>
</html>